<%--
  Created by IntelliJ IDEA.
  User: 25443
  Date: 2021/3/5
  Time: 16:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
  </head>
  <body>
  <a href="/book/allBook">书籍查看</a> <a href="index.jsp">登录</a>
  <%--action="${pageContext.request.contextPath}/user/login"--%>
  <form action="" >
    <table >
      <tr id="t1">
        <td>用户名aa: </td>
        <td><input type="text" id="username" name="username" onblur="userlen(),userR()"></td>
      </tr>
      <tr id="t2">
        <td>密码: </td>
        <td><input type="text" id="password" name="password"></td>
      </tr>
    </table>

    <button id="button">登录</button>
    <span id="status"> </span>
  </form>


  <form enctype="multipart/form-data" action="/file/sentFile">
    <input type="file" name="file">
    <button>提交</button>
  </form>
  <script src="${pageContext.request.contextPath}/lib/jquery-3.5.1.js"></script>
  <script type="text/javascript">

      function userlen() {
          if ($("#username").val().length>10) {
              if($("#s1")){
                  $("#s1").remove();
              }
              $("#t1").append("<span id='s1'>用户名太长</span>")
              $("#s1").css("color","red")
          }
      }
      function userR() {
          $.ajax(
              {
                  type:"get",
                  url:"${pageContext.request.contextPath}/user/name",
                  success:function (data) {
                      if($("#s1")){
                          $("#s1").remove();
                      }
                      $("#t1").append("<span id='s1'>"+data+"</span>")
                      if (data=="账号正确") {
                          $("#s1").css("color","green");
                      }else {
                          $("#s1").css("color","red");
                          alert(JSON.stringify(data))
                      }

                  },
                  data:{name:$("#username").val()},
                  datatype:"json"

              })
      }
      $(function () {
          $("#button").click(function (event) {

              $.ajax(
                  {
                      type:"get",
                      url:"${pageContext.request.contextPath}/user/login",
                      success:function (data) {

                          if (data.toString().trim()=="账号或密码错误!"){
                              $("#status").html(data)
                              $("#status").css("color","red")
                          }else {
                              window.location.href="${pageContext.request.contextPath}/book/allBook";
                          }

                      },
                      data:{username:$("#username").val()},
                      datatype:"json"

                  })
              return false;
          })
      })
  </script>
    </body>
</html>
